<template>
	<div id="tmpl">
	<div id="des">
	  <h4>{{lists.title}}</h4>
	  <p>时间：{{lists.add_time | datefmt('YYYY-MM-DD')}}  <span>点击次数：{{lists.click}}</span> </p>
	  <hr />
	  <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"  v-for="(item, index) in list">
                    <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, list)">
		            </li>
		        </ul> 
		</div>
	<p v-html="lists.content"></p>
	</div>
   <comment id="id"></comment>
	</div>
</template>

<script>
	import comment from "../suboom/comment.vue";
	import commen from "../../kits/commen.js";
	export default{
	components:{
		comment,
	},
	data(){
		return{
			id:0,
		lists:{
		},
		list:[],
		}
	},
	created(){
		this.id=this.$route.params.id;
		this.getinfo();
		this.getimgls();
	},
	methods:{
		getinfo(){
					var url=commen.apidomain+"/api/getimageInfo/"+this.id
					this.$http.get(url).then(function(res){
						if(res.body.status!=0){
						return;
						}
						this.lists=res.body.message[0];
						
					})
				},
				getimgls(){
					var url=commen.apidomain+"/api/getthumimages/"+this.id
					this.$http.get(url).then(function(res){
						if(res.body.status!=0){
						return;
						}
						res.body.message.forEach(function(item){
							var img=document.createElement('img');
							img.src=item.src;
							item.h=img.height;	
							item.w=img.width;
						})
						this.list=res.body.message;
					
						
					})
				},
	}
	}
</script>

<style scoped>
	#des{
		padding: 10px;
	}
	#des h4{
		color:#0094FF;
	}
	#des p{
	color:rgba(0,0,0,0.4);
	margin-top:10px;
	}
	hr{
		margin-top: 20px;
	}
	   .mui-content ul{
        background-color: #fff;
        border-left: 0px;
        border-top: 0px;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border-right: 0px;
        border-bottom: 0px;
    }
    .mui-content img{
    	width: 100px;
    	height: 100px;
    }
</style>